<template>
  <i-biz-panel-grid-container
    v-if="modelData.predefinedType === 'CONTAINER_GRID'"
    :modelData="modelData"
    :container="container"
    :controller="controller"
    :controls="controls"
  />
  <i-biz-panel-container-group
    v-else-if="modelData.predefinedType === 'CONTAINER_GROUP'"
    :modelData="modelData"
    :container="container"
    :controller="controller"
    :controls="controls"
  />
  <i-biz-scroll-container
    v-else-if="modelData.predefinedType === 'CONTAINER_SCROLL'"
    :modelData="modelData"
    :container="container"
    :controller="controller"
    :controls="controls"
  />
  <i-biz-scroll-container-item
    v-else-if="
      modelData.predefinedType === 'CONTAINER_SCROLL_LEFT' ||
      modelData.predefinedType === 'CONTAINER_SCROLL_HEADER' ||
      modelData.predefinedType === 'CONTAINER_SCROLL_RIGHT' ||
      modelData.predefinedType === 'CONTAINER_SCROLL_BOTTOM' ||
      modelData.predefinedType === 'CONTAINER_SCROLL_MAIN'
    "
    :modelData="modelData"
    :container="container"
    :controller="controller"
    :controls="controls"
  />
  <i-biz-panel-container-image
    v-else-if="modelData.predefinedType === 'CONTAINER_IMAGE'"
    :modelData="modelData"
    :container="container"
    :controller="controller"
    :controls="controls"
  />
  <i-biz-panel-container
    v-else
    :modelData="modelData"
    :container="container"
    :controller="controller"
    :controls="controls"
  />
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IPanelContainer, IControl } from "@ibiz/model-core";
import {
  IPanelItemController,
  IViewLayoutPanelController,
} from "@ibiz-template/runtime";
import { PropType } from "vue";

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: Object as PropType<IPanelItemController>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
});
</script>
